<!--
* @author wn
* @date 2022/06/22 14:28:24
* @description: 商品详情页面  -- 商品详情
* index中--goods-tabs--goods-detail 依赖注入 (goods--detail)
!-->
<template>
	<div class="goods-detail" v-if="good && good.details">
		<!-- 属性 -->
		<ul class="attrs">
			<li v-for="item in good.details.properties" :key="item.name">
				<span class="dt">{{ item.name }}</span>
				<span class="dd">{{ item.value }}</span>
			</li>
		</ul>
		<!-- 图片 -->
		<img
			v-for="picUrl in good.details.pictures"
			:key="picUrl"
			v-lazy="picUrl"
		/>
	</div>
</template>
<script>
import { inject } from 'vue'
export default {
	name: 'GoodsDetail',
	setup() {
		const good = inject('good')
		return { good }
	},
}
</script>
<style scoped lang="less">
.goods-detail {
	padding: 40px;
	.attrs {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30px;
		li {
			display: flex;
			width: 430px;
			padding-bottom: 10px;
			.dt {
				width: 100px;
				color: #999;
			}
			.dd {
				flex: 1;
				color: #666;
			}
		}
	}
	img {
		width: 100%;
	}
}
</style>
